<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
   
    body
        {
            font-size:70%;
            font-family:verdana,helvetica,arial,sans-serif;
        }
        </style>
    <script type="text/javascript">
    function cnvs_getCoordinates(e)
    {
        x=e.clientX;
        y=e.clientY;
        document.getElementById("xycoordinates").innerHTML=
        "Coordinates:(" + x + "," + y +")";
    }
    function cnvs_clearCoordinates(){
        document.getElementById("xycoordinates").innerHTML="";

    }
    
    </script>
</head>
<body style="margin:0px;">
    <p>
            把鼠标悬停在下面的矩形上可以看到坐标：
    </p>
    <div id="coordiv"
        style="float:left;width:199px;height:99px;border:1px
        solid #000000"
         onmousemove="cnvs_getCoordinates(event)"
        onmouseout="cnvs_clearCoordinates()">
        

    </div>
        <br/>
        <br>
        <br/>
        <div id="xycoordinates"></div>
    
</body>
</html>